<template>
  <view class="weather-app">
    <!-- 动态天气背景 -->
    <WeatherBackground 
      :weather="weatherData?.weather || 'default'"
      :isDaytime="isDaytime()"
    />
    
    <!-- 背景装饰 -->
    <view class="bg-decoration">
      <view class="bg-circle circle-1"></view>
      <view class="bg-circle circle-2"></view>
      <view class="bg-circle circle-3"></view>
    </view>

    <!-- 头部区域 -->
    <view class="header">
      <view class="header-content">
        <text class="app-title">WeatherApp</text>
        <text class="app-subtitle">实时天气查询</text>
      </view>
    </view>
    
    <!-- 搜索区域 -->
    <view class="search-container">
      <view class="search-box">
        <view class="search-input-wrapper">
          <image class="search-icon" src="/static/images/search-icon.svg" mode="aspectFit" />
          <nut-input 
            class="search-input"
            v-model="cityName"
            placeholder="输入城市名称..."
            @confirm="handleSearch"
            :disabled="loading"
            :border="false"
            :background="'transparent'"
          />
        </view>
        <nut-button 
          class="search-button"
          type="primary"
          size="normal"
          @click="handleSearch"
          :disabled="loading || !cityName.trim()"
          :loading="loading"
        >
          查询
        </nut-button>
      </view>
    </view>

    <!-- 天气信息卡片 -->
    <view class="weather-container" v-if="weatherData">
      <view 
        class="weather-card"
        :class="{ show: weatherData }"
      >
        <!-- 卡片头部 -->
        <view class="card-header">
          <text class="card-title">{{ weatherData.city }}</text>
          <text class="card-subtitle" v-if="weatherData.province">{{ weatherData.province }}</text>
        </view>
        
        <!-- 卡片内容 -->
        <view class="card-content">
          <view class="main-weather">
            <view class="weather-temp-section">
              <view class="weather-info">
                <image class="weather-icon" :src="getWeatherIcon(weatherData.weather)" mode="aspectFit" />
                <text class="weather-text">{{ weatherData.weather }}</text>
              </view>
              <view class="temp-display">
                <text class="temp-number">{{ weatherData.temperature }}</text>
                <text class="temp-unit">°C</text>
              </view>
            </view>
          </view>

          <!-- 详细信息 -->
          <view class="weather-details">
            <view class="detail-item" v-if="weatherData.humidity">
              <image class="detail-icon" src="/static/images/humidity-icon.svg" mode="aspectFit" />
              <text class="detail-text">湿度 {{ weatherData.humidity }}%</text>
            </view>
            <view class="detail-item" v-if="weatherData.windDirection">
              <image class="detail-icon" src="/static/images/wind-direction-icon.svg" mode="aspectFit" />
              <text class="detail-text">风向 {{ weatherData.windDirection }}</text>
            </view>
            <view class="detail-item" v-if="weatherData.windPower">
              <image class="detail-icon" src="/static/images/wind-power-icon.svg" mode="aspectFit" />
              <text class="detail-text">风力 {{ weatherData.windPower }}级</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 错误提示 -->
    <view class="error-container" v-if="error">
      <view class="error-card">
        <view class="error-content">
          <image class="error-icon" src="/static/images/error-icon.svg" mode="aspectFit" />
          <text class="error-message">{{ error }}</text>
          <nut-button 
            type="danger" 
            size="small"
            @click="handleRetry"
          >
            重新查询
          </nut-button>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-container" v-if="!weatherData && !error && !loading">
      <view class="empty-card">
        <view class="empty-content">
          <image class="empty-icon" src="/static/images/empty-weather-icon.svg" mode="aspectFit" />
          <text class="empty-title">开始查询天气</text>
          <text class="empty-desc">输入城市名称，如：北京、上海、广州</text>
          <view class="empty-suggestions">
            <text class="suggestions-title">热门城市：</text>
            <view class="suggestion-tags">
              <text class="suggestion-tag" @click="cityName = '北京'; handleSearch()">北京</text>
              <text class="suggestion-tag" @click="cityName = '上海'; handleSearch()">上海</text>
              <text class="suggestion-tag" @click="cityName = '广州'; handleSearch()">广州</text>
              <text class="suggestion-tag" @click="cityName = '深圳'; handleSearch()">深圳</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useWeatherStore } from '../../stores/weather'
import WeatherBackground from '../../components/WeatherBackground.vue'
import './index.scss'

const weatherStore = useWeatherStore()
const cityName = ref('')

const handleSearch = async () => {
  if (!cityName.value.trim()) return
  
  await weatherStore.fetchWeather(cityName.value.trim())
}

const handleRetry = () => {
  cityName.value = ''
}

// 判断当前是白天还是夜晚
const isDaytime = () => {
  const now = new Date()
  const hour = now.getHours()
  // 6:00-18:00 为白天，其他时间为夜晚
  return hour >= 6 && hour < 18
}

// 根据天气类型获取对应图标
const getWeatherIcon = (weather: string) => {
  const isDay = isDaytime()
  
  // 基础天气图标映射（不区分白天夜晚的）
  const baseWeatherIconMap: Record<string, string> = {
    // 阴天
    '阴': '/static/images/weather/overcast.svg',
    '阴天': '/static/images/weather/overcast.svg',
    
    // 雨系列
    '小雨': '/static/images/weather/light-rain.svg',
    '中雨': '/static/images/weather/rain.svg',
    '大雨': '/static/images/weather/heavy-rain.svg',
    '暴雨': '/static/images/weather/torrential-rain.svg',
    '阵雨': '/static/images/weather/showers.svg',
    '雷阵雨': '/static/images/weather/thunderstorm.svg',
    
    // 雪系列
    '小雪': '/static/images/weather/light-snow.svg',
    '中雪': '/static/images/weather/snow.svg',
    '大雪': '/static/images/weather/heavy-snow.svg',
    '雨夹雪': '/static/images/weather/sleet.svg',
    
    // 特殊天气
    '冰雹': '/static/images/weather/hail.svg',
    '霜冻': '/static/images/weather/frost.svg',
    '雾霾': '/static/images/weather/haze.svg',
    '雾': '/static/images/weather/haze.svg',
    '霾': '/static/images/weather/haze.svg',
    '大风': '/static/images/weather/strong-wind.svg'
  }
  
  // 需要区分白天夜晚的天气类型
  const dayNightWeatherMap: Record<string, { day: string, night: string }> = {
    '晴': { day: '/static/images/weather/sunny-day.svg', night: '/static/images/weather/sunny-night.svg' },
    '晴天': { day: '/static/images/weather/sunny-day.svg', night: '/static/images/weather/sunny-night.svg' },
    '多云': { day: '/static/images/weather/cloudy-day.svg', night: '/static/images/weather/cloudy-night.svg' }
  }
  
  // 首先检查是否需要区分白天夜晚
  if (dayNightWeatherMap[weather]) {
    return isDay ? dayNightWeatherMap[weather].day : dayNightWeatherMap[weather].night
  }
  
  // 检查基础天气图标
  if (baseWeatherIconMap[weather]) {
    return baseWeatherIconMap[weather]
  }
  
  // 默认图标
  return '/static/images/weather/default.svg'
}

// 使用 computed 获取响应式数据
const weatherData = computed(() => weatherStore.weatherData)
const loading = computed(() => weatherStore.loading)
const error = computed(() => weatherStore.error)
</script>
